<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{title}} - {{str}}</h2>
			<!-- 1. 在父组件使用子组件的位置，绑定自定义事件 -->
			<my-temp @abc="fn" :msg="msg"></my-temp>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	
	<template id="temp">
		<div>
			<p>这是{{name}}组件</p>
			<p>{{msg}}</p>
			<button @click="send">发送</button>
		</div>
	</template>
	
	<script type="text/javascript">
		let temp = {
			template:"#temp",
			data:()=>{
				return {
					name:"子 - a",
					str:"来自子组件的数据 - child"
				}
			},
			props:["msg"],
			methods:{
				send(){
					// 2. 在子组件中使用this.$emit触发自定义事件，并传入数据
					this.$emit("abc", this.str);
				}
			}
		}
		
		let vm = new Vue({
			el:"#app",
			data:{
				title:"组件之间的传值-子传父",
				msg:"来自父组件的数据 - hello",
				str:""
			},
			components:{
				myTemp:temp
			},
			methods:{
				// 3. 在父组件中定义自定义事件的处理方法,方法的默认参数,就是子组件传入的数据
				fn(v){
					// console.log(v);
					this.str = v;
				}
			}
		});
		
	</script>
</html>
